<template>
	<view class="vote_index">
		<userinfo v-if="user_options.toLogin" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo" ></userinfo>
		<villageChooseHouse v-if="choose_options.need_choose_house" :options="choose_options" @chooseHouseId="chooseHouseId"></villageChooseHouse>
		
		<view>
			<view class="vote_list">
				<view v-if="!no_data">
					<view class="vote_msg" v-if="list_data" v-for="(item, index) in list_data" @tap="vote_detail(item.vote_id)">
						<view class="vote_title">
							{{item.vote_title}}
							<text v-if="item.is_join">
								(<text>已投票</text><text v-if="item.vote_status==2">，点击查看结果</text>)
							</text>
						</view>
						<view class="vote_time">
							{{item.start_time_txt}}至{{item.end_time_txt}}
							<text class="no_active" v-if="item.vote_status==0">未开始</text>
							<text class="in_active" v-if="item.vote_status==1">进行中</text>
							<text class="end_active" v-if="item.vote_status==2">已结束</text>
						</view>
						<view class="vote_img" v-if="item.vote_image && item.vote_image[0]">
							<image :src="item.vote_image[0]['file_url']" mode="aspectFill" style="width: 100%;height: 100px;"></image>
						</view>
					</view>
				</view>
				<view class="tip_box_no_data" v-if="no_data">
					<image class="no_data_img" src="../../static/images/no_data.png"></image>
					<view class='no_tip_content'>还没有内容哦</view>
				</view>
				<view class="tip_msg" v-if="isLoading">
					<view>加载中</view>
				</view>

				<view class="tip_msg" v-if="finished">
					<view>我也是有底线的···</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import villageChooseHouse from '../../appComponent/villagePage/villageChooseHouse';
	
	var common = require('../../utils/common.js');
	var app = getApp();
	var _this;
	export default {
		name: 'index',
		onLoad: function(options) {
			_this = this;
			console.log('options', options)
			
			common.setMainColor(_this, function(config) {

			});
			
			if (options && options.village_id) {
				_this.village_id = options.village_id
			}
			
			const res = uni.getStorageSync('village_key');
			if (res) {
				_this.village_id = res.village_id;
				_this.pigcms_id = res.pigcms_id;
				_this.village_name = res.village_name;
				_this.village_logo = res.village_logo;
			}
			// #ifdef H5
				if(_this.village_id){
					_this.setWxShare()
				}
			// #endif
			
			if (app.globalData.is_login) {
				if (!_this.village_id) {
					console.log('village_id++++++++', _this.village_id);
					uni.showModal({
						title: common.changeTxt('提示'),
						content: common.changeTxt('您没有选择小区,请选择一个小区浏览'),
						showCancel: false,
						confirmText: common.changeTxt('选择'),
						success: function(res) {
							if (res.confirm) {
								var url = '/pages/village/my/villagelist';
								if (_this.property_id && _this.property_id > 0) {
									url += '?property_id=' + _this.property_id;
								}
								uni.redirectTo({
									url: url
								});
							}
						}
					});
				} else if (!_this.pigcms_id) {
					_this.choose_options = {
						need_choose_house: true,
						village_id: _this.village_id,
						after_event: '',
						canCancle: false,
						bindHasCancleMethod: false
					}
				} else {
					_this.getVoteList()
				}
			}else{
				_this.user_options = {
					toLogin: true
				};
			}
		},
		components: {
			villageChooseHouse
		},
		data() {
			return {
				user_options: {},
				choose_options: {},
				finished: false,
				isLoading: false,
				'title': '活动投票',
				total_page: 1,
				count: 10,
				page: 1,
				list_data: [],
				pigcms_id: '',
				village_id: '',
				village_logo: '',
				no_data: false
			}
		},
		methods: {
			onShareAppMessage: function () {
				return {
					title: '【'+_this.village_name+'】活动投票系统',
					desc: '快来看看绿地中心【' + _this.village_name + '】的这些投票活动',
					path: '/pages/vote/index?village_id=' + _this.village_id
				};
			},
			setWxShare() {
				let pageLink = `${common.requestDomain}packapp/${common.wxapp_type}/pages/vote/index?village_id=${_this.village_id}`
				pageLink = common.addShareParam(pageLink)
				let shareWxLink = pageLink;
				var shareData = {
					title: '【'+_this.village_name+'】活动投票系统',
					desc: '快来看看绿地中心【' + _this.village_name + '】的这些投票活动',
					sendFriendLink: shareWxLink,
					share_img: _this.village_logo
				}
				console.log('vote_shareData', shareData);
				common.setWxShare(shareData)
			},
			chooseHouseId(param){
				_this.pigcms_id = param.pigcms_id;
				_this.getVoteList()
				// #ifdef H5
					if(_this.village_id){
						_this.setWxShare()
					}
				// #endif
			},
			getVoteList() {
				var params = {};
				params['page'] = _this.page;
				params['pigcms_id'] = _this.pigcms_id;
				params['village_id'] = _this.village_id;
				_this.isLoading = true;
				_this.finished = false;
				common.plugin_post('Api&a=vote_list', params, data => {
					if ((data && !_this.list_data && data.list) || _this.page==1) {
						_this.list_data = data.list;
					} else if (data && _this.list_data && data.list) {
						for (let i in data.list) {
							if (data.list[i]) {
								_this.list_data.push(data.list[i]);
							}
						}
					}
					if (data && data.count && data.count > 0) {
						_this.count = data.count
					} else {
						_this.count = 0
					}
					console.log('_this.page', _this.page);
					console.log('data.count', data.count);
					if (_this.page==1 && data.count==0) {
						_this.isLoading = false;
						_this.finished = false;
						_this.no_data = true;
					} else {
						if (data && data.total_page && data.total_page > 0) {
							_this.total_page = data.total_page
						} else {
							_this.total_page = 1
						}
						if (_this.list_data.length > _this.count) {
							_this.finished = true;
						} else if (data && data.count < 20) {
							_this.finished = true;
						}
						// 加载状态结束
						_this.isLoading = false
						setTimeout(function() {
							uni.stopPullDownRefresh();
						}, 500);
					}
				});
			},
			// 上拉加载
			onReachBottom() {
				console.log('onReachBottom', _this.loading);
				if (!_this.finished) {
					_this.page = _this.page + 1;
					_this.getVoteList();
				} else {
					_this.isLoading = false;
					_this.finished = true;
				}
			},
			onPullDownRefresh: function(e) {
				_this.page = 1;
				_this.getVoteList();
				console.log('refresh');
			},
			vote_detail(vote_id) {
				var url = '/pages/vote/voteDetail?from=list&vote_id=' + vote_id
				if (_this.pigcms_id && _this.pigcms_id > 0) {
					url += '&pigcms_id=' + _this.pigcms_id
				}
				if (_this.village_id && _this.village_id > 0) {
					url += '&village_id=' + _this.village_id
				}
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style>
	.vote_index {
		background-color: #fafafa;
		height: 100%;
	}

	.vote_index .vote_top_box {
		background-color: white;
		padding: 20rpx;
	}

	.vote_index .vote_top_box .tip {
		font-size: 30rpx;
		line-height: 50rpx;
		color: #535252;
		font-weight: 800;
		white-space: nowrap;
		overflow: hidden;
		text-align: center;
	}

	.vote_index .vote_list {
		padding: 20rpx;
	}

	.vote_index .vote_list .vote_msg {
		padding: 20rpx;
		background-color: white;
		margin-bottom: 20rpx;
	}


	.vote_index .vote_list .vote_msg .vote_title {
		font-size: 32rpx;
		word-wrap: break-word;
		word-break: break-all;
	}

	.vote_index .vote_list .vote_msg .vote_title text {
		font-size: 20rpx;
		color: #535252;
	}

	.vote_index .vote_list .vote_msg .vote_time {
		font-size: 28rpx;
		color: #535252;
		padding: 20rpx 0;
	}

	.vote_index .vote_list .vote_msg .vote_time text.in_active {
		font-size: 28rpx;
		color: #3692f5;
		padding-left: 6rpx;
	}

	.vote_index .vote_list .vote_msg .vote_time text.end_active {
		font-size: 28rpx;
		color: #ff976a;
		padding-left: 6rpx;
	}

	.vote_index .vote_list .vote_msg .vote_time text.no_active {
		font-size: 28rpx;
		color: #07c160;
		padding-left: 6rpx;
	}

	.vote_index .tip_msg {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #666;
		padding: 20rpx 0;
		background: #f8f8f8;
	}
	.tip_box_no_data {
		padding-top: calc((100vh - 80rpx - 288rpx - 21rpx)/2);
		font-size: 28rpx;
		text-align: center;
	}
	.tip_box_no_data .tip_title {
		width: 100%;
		text-align: center;
	}
	.no_data_img{
		width:374rpx;
		height:288rpx;
	}
</style>
